<template>
  <el-select
    v-model="value"
    @change="selectChange"
    :placeholder="placeholder"
    :multiple="multiple"
    :multiple-limit="multipleLimit"
    :collapse-tags="collapseTags"
    :clearable="clearable"
    :filterable="filterable"
    :disabled="disabled"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.text"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script lang="ts">
import {
  ref,
  toRefs,
  reactive,
  onMounted,
  defineProps,
  getCurrentInstance,
  watch,
  defineComponent,
} from "vue";
import request from "/@/utils/request";
import { Local } from "/@/utils/storage";

export default {
  name: "wg-dictionary",
  emits: ["update:modelValue"],
  props: {
    // 数据
    data: [Object, Array],
    // select
    filterable: Boolean,
    //字典编码
    code: {
      type: String,
      default: "",
    },
    // 输入框占位文本
    placeholder: {
      type: String,
      default: "请选择",
    },

    //是否开启多选
    multiple: {
      type: Boolean,
      default: false,
    },
    //最多选择数量
    multipleLimit: Number,
    //collapse-tags
    collapseTags: {
      type: Boolean,
      default: false,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    modelValue: [String, Array],
  },
  setup: (props: Object, { emit }) => {
    const { proxy } = getCurrentInstance();
    const state = reactive({
      dictionaryAllData: {
        type: Object,
        default: {},
      },
      options: [],
      value: "",
      clearable: true,
    });

    const initDictionaryData = () => {
      //Local.clear()
      state.dictionaryAllData = Local.get("dictionaryData");
      if (state.dictionaryAllData == null) {
        request({
          url: "/api/system/dictionary/content/data/modelMap",
          method: "get",
          params: {},
        })
          .then((res) => {
            if (res.data.version) {
              Local.set("dictionaryData", res.data.data);
              state.dictionaryAllData = res.data.data;
              setTimeout(() => {
                initSelect();
              }, 100);
            }
          })
          .catch((error) => {
            proxy.$wigem.log("字典接口异常");
          });
      } else {
        setTimeout(() => {
          initSelect();
        }, 100);
      }
    };
    const selectChange = (val: any) => {
      if (props.multiple) {
        val = val.join(",");
        state.clearable = false;
      }
      proxy.$emit("update:modelValue", val);
    };
    const initSelect = () => {
      let data: Object = state.dictionaryAllData[props.code];
      for (let key in data) {
        state.options.push(data[key]);
      }
      init();
      // proxy.$wigem.log(state.options);
    };
    const init = () => {
      if (props.filterable) {
        state.options = props.data;
      }
    };
    onMounted(() => {
      initDictionaryData();
    });
    // 监听双向绑定值的改变
    watch(
      () => {
        props.modelValue;
        if (props.multiple && props.modelValue != null) {
          state.value = props.modelValue.split(",");
          if (props.modelValue.length <= 0) {
            state.value = "";
          }
          state.clearable = false;
        } else {
          state.value = props.modelValue;
        }
        init();
      },
      () => state.options
    );
    watch(
      () => props.code,
      () => {
        state.options = [];
        setTimeout(() => {
          initSelect();
        }, 100);
      }
    );
    return {
      selectChange,
      ...toRefs(state),
    };
  },
};
</script>
